.Container {
  display: flex;
}

.ButtonGroup {
  display: flex;
}

.Button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin: 0;
  outline: 0;
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
  color: var(--color-gray-900);
  font-weight: 700;
  user-select: none;

  &[data-popup-open] {
    background-color: var(--color-gray-100);
  }

  &:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: -1px;
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--color-gray-100);
    }
  }

  &:active {
    background-color: var(--color-gray-100);
  }

  &:only-child {
    border-radius: 0.375rem;
  }

  &:first-child:not(:only-child) {
    border-radius: 0.375rem 0 0 0.375rem;
  }

  &:last-child:not(:only-child) {
    border-radius: 0 0.375rem 0.375rem 0;
  }

  &:not(:first-child) {
    border-left: none;
  }
}

.Icon {
  width: 1.25rem;
  height: 1.25rem;
}

.Positioner {
  height: var(--positioner-height);
  width: var(--positioner-width);
  max-width: var(--available-width);
  transition:
    top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    right 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  &[data-instant] {
    transition: none;
  }
}

.Popup {
  position: relative;
  height: var(--popup-height, auto);
  width: var(--popup-width, auto);
  max-width: 500px;
  transform-origin: var(--transform-origin);
  border-radius: 0.375rem;
  background-color: canvas;

  font-size: 0.875rem;
  line-height: 1.25rem;
  transition:
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.9);
  }

  &[data-instant] {
    transition: none;
  }

  @media (prefers-color-scheme: light) {
    outline: 1px solid var(--color-gray-200);
    box-shadow:
      0 10px 15px -3px var(--color-gray-200),
      0 4px 6px -4px var(--color-gray-200);
  }

  @media (prefers-color-scheme: dark) {
    outline: 1px solid var(--color-gray-300);
    outline-offset: -1px;
  }
}

.Arrow {
  display: flex;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  &[data-instant] {
    transition: none;
  }

  &[data-side='top'] {
    bottom: -8px;
    rotate: 180deg;
  }

  &[data-side='bottom'] {
    top: -8px;
    rotate: 0deg;
  }

  &[data-side='left'] {
    right: -13px;
    rotate: 90deg;
  }

  &[data-side='right'] {
    left: -13px;
    rotate: -90deg;
  }
}

.ArrowFill {
  fill: canvas;
}

.ArrowOuterStroke {
  @media (prefers-color-scheme: light) {
    fill: var(--color-gray-200);
  }
}

.ArrowInnerStroke {
  @media (prefers-color-scheme: dark) {
    fill: var(--color-gray-300);
  }
}

.Viewport {
  --viewport-inline-padding: 0.5rem;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: clip;
  padding: 0.25rem var(--viewport-inline-padding);

  & [data-previous],
  & [data-current] {
    width: calc(var(--popup-width) - 2 * var(--viewport-inline-padding));
    translate: 0;
    opacity: 1;
    transition:
      translate 350ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 175ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  &[data-activation-direction~='left'] [data-current][data-starting-style] {
    translate: -50% 0;
    opacity: 0;
  }

  &[data-activation-direction~='right'] [data-current][data-starting-style] {
    translate: 50% 0;
    opacity: 0;
  }

  [data-instant] & [data-previous],
  [data-instant] & [data-current] {
    transition: none;
  }

  &[data-activation-direction~='left'] [data-previous][data-ending-style] {
    translate: 50% 0;
    opacity: 0;
  }

  &[data-activation-direction~='right'] [data-previous][data-ending-style] {
    translate: -50% 0;
    opacity: 0;
  }
}
